<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/goods/search-ware.css" />

    <!-- <link rel="stylesheet" type="text/css" href="../css/goods/confirm_order.css" /> -->
    <link rel="stylesheet" href="../css/mui.picker.min.css">
    <script type="text/javascript">
        (function () {
            var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
            clientWidth = clientWidth || localStorage.getItem("clientWidth")
            if (clientWidth > 750)
                clientWidth = 750;
            document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        })();
    </script>
    <style>
        html,
        body,
        .mui-content {
            overflow: hidden;
        }

        .ptsp_top_stats {
            /*height: 20px;*/
            /*width: 100%;*/
            /*background-color: #ffffff;*/
            /*position: fixed;*/
            /*top: 0;*/
            /*left: 0;*/
            /*z-index: 10000;*/
        }

        .mui-action-back {
            height: 44px;
            width: 44px;
        }

        .mui-action-back img {
            width: 100%;
        }


        .arr_left {
            background-image: url(../images/ptsp/left_arr_03.png);
            background-size: 24px 24px;
            background-position: center;
            background-repeat: no-repeat;
        }

        .mui-title {
            font-size: 0.768rem;
        }

        .mui-bar-nav a {
            font-size: 0.5973rem;
            color: #888888;
            line-height: 44px;
        }

        body,
        html,
        .mui-content {
            padding-top: 0;
            margin-top: 0;
        }

        .pullrefresh {
            /*position: relative;*/
            /*z-index: 9999;*/
            /*width: 100%;*/
        }

        .item{
            /*background: #f90;*/
            /*position: relative;*/
            /*z-index: 9999;*/
        }

        .mui-pull-top-pocket {
            /*top: 0px;*/
        }

        .mui-bar-nav ~ .mui-content {
        }

        .mui-bar {
            top: 0;
        }
        .no_res{
        	text-align: center;
        	line-height: 50px;
        	color: #888888;
        	margin-top: 60px;
        }
    </style>
</head>

<body>

<div id="app">

    <header class="mui-bar mui-bar-nav" style="z-index: 10000;">
        <a class="mui-action-back mui-icon  mui-pull-left">
            <img src="../images/ptsp/left_arr_03.png" alt="">
        </a>
        <h1 class="mui-title">
           搜索
        </h1>
    </header>
 
            <!--数据列表-->
            <div class="mui-content" style=" ">
            	
                <div class="search-group-wrap">
                    <div class="search-group">
                        <span class="search-btn"></span>
                        <input type="text" id="search_input" v-model="keyworks"  placeholder="请输入商品名称搜索...">
                        <i class="mui-icon mui-icon-closeempty" id="clearSearchInput" @click="clearSearchInput"></i>
                    </div>
                    <div class="subbtn" @click="searchInput()">
                    	搜索
                    </div>
                </div>

                <div class="search-group-list">
					
                    <div class="ware-item" v-for="wareItem in wareGroup">
                        <a :href="'goods_detail.html?goodsid=' + wareItem.goodsid">
                            <div class="ware-img">
                                <img :src="wareItem.pic" alt="">
                            </div>
                            <div class="ware-info">
                                <p class="ware-info-title" v-html="wareItem.name"></p>
                                <p class="ware-info-price">￥{{wareItem.min_price}}元 <del class="ware-info-oPrice">￥{{wareItem.max_price}}元</del></p>
                                <img class="ware-info-icon" src="../images/ptsp/car_03.png" alt="">
                        </div>
                        </a>
                    </div>

                </div>
                
                <div class="no_res" v-if="no_res">
					 <div style="line-height: 30px;"><i class="mui-icon mui-icon-info" ></i></div>
						未找到相关商品</div>

            </div>
    

    <!--底部菜单-->
    <style type="text/css">
        .mui-bar-tab .mui-tab-item.mui-active {
            color: #888888;
        }

        .bottom_nav_active span {
            color: #1c83fc;
        }
    </style>
    <!--<nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc;top: auto;">
        <a class="mui-tab-item " id='home_tab' href="shop_home.html">
				<span class="mui-icon ">
                <img src="../images/nav_12.png" width="19px;" alt="">
            	</span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item " id='class_tab' href="select_class.html">
				<span class="mui-icon">
                <img src="../images/nav_03.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label">分类</span>
        </a>
        <a class="mui-tab-item bottom_nav_active" id='shop_tab' href="youhui.html">
				<span class="mui-icon">
                <img src="../images/mingpin_03.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label">名品商家</span>
        </a>
        <a class="mui-tab-item " id='car_tab' href="buy_car.html">
				<span class="mui-icon">
                <img src="../images/nav_07.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label">购物车</span>
        </a>
        <a class="mui-tab-item" id='my_tab' href="my.html">
				<span class="mui-icon">
                <img src="../images/nav_09.png" width="19px;" alt="">
            </span>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>-->

</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/host.config.js"></script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/tools/util.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
 
    var app = new Vue({
        el: '#app',
        data: {
            wareGroup:{},   //商品
            keyworks: '',
            no_res:false
        },
        methods: {
        	focus:function(){
        		console.log("-------------")
        		return false
        	},
            tapItem: function(ptid,tid) {
                // 更新当前选中的菜单项
                var menusGroup = tab.menusGroup;
                for (menuItem in menusGroup) {
                    var item = menusGroup[menuItem];
                    if (item.ptid == ptid) {
                        item.checked = true;
                    } else {
                        item.checked = false;
                    }
                }
                $.post(url + 'api/goods/lists', {bid: 123,tid:tid ,ptid:ptid}, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                        var menus = responseData.data.goods;
                        app.wareGroup = menus;
                    }
                });
            },
            searchInput: function (keyworks) {
							console.log(app.keyworks);
				 
							if(app.keyworks=="优享特卖"||app.keyworks=="优享"||app.keyworks=="特卖"){
								mui.openWindow("chaojineigou.html","chaojineigou.html");
								return;
							}
            	console.log('searchInput')
                $.post(url + 'api/goods/search', {bid: 123,name:app.keyworks}, function (response) {
                    var responseData = JSON.parse(response);
                    if (responseData.code == '1') {
                     
                        var data = responseData.data;
                        
                        if(data.length){
                        	app.no_res = false
                        	app.wareGroup = data;
                        }else{
                        	app.no_res = true
                        }
                    }
                });
            }
        },
        mounted: function() {
            //初始化第一页数据
            // $.get(url + 'api/commtype/thrmenus', {bid: 123,ptid:host_config.localStorage.ptid}, function (response) {
            //     var responseData = JSON.parse(response);
            //     if (responseData.code == '1') {
            //         var menus = responseData.data;
            //         for (menuItem in menus) {
            //             var item = menus[menuItem];
            //             if (menuItem == 0) {
            //                 item.checked = true;
            //             }else{
            //                 item.checked = false;
            //             }
            //         }
            //         var ptid = menus[0].ptid;
            //         $.post(url + 'api/goods/lists', {bid: 123,tid:host_config.localStorage.tid,ptid:ptid}, function (response) {
            //             var responseData = JSON.parse(response);
            //             if (responseData.code == '1') {
            //                 var menus = responseData.data.goods;
            //                 tab.wareGroup = menus;
            //             }
            //         });
            //         app.menusGroup = menus;
            //     }
            // });

            console.log('页面加载');
            var that = this;
            // 初始化页面
            mui.init({
   
			});
			
			
			$("#search_input").focus()
        }
    });
    mui(document).on('tap','a',function(){
        mui.openWindow(this.href,this.href)
    });
	 
    mui(document).on('tap','#clearSearchInput',function () {
        app.keyworks = '';
    })


</script>
</body>

</html>